<template>
  <div class="drugsbox">
    <div class="titDrug">药品信息</div>
    <div>
      <table>
        <thead>
          <tr class="dhead">
            <td style="width:5%;">序号</td>
            <td style="width:14%;">药品编码</td>
            <td style="width:15%;">药品名称</td>
            <td style="width:14%;">药品规格</td>
            <td style="width:15%;">数量</td>
            <td style="width:15%;">单位</td>
            <td style="width:7%;">单价</td>
            <td style="width:7%;">总价</td>
            <td style="width:7%;">操作</td>
          </tr>
        </thead>
        <tbody>
          <tr class="dbody" v-for="(drug, index) in arrdetail" :key="drug.id">
            <td style="width:5%;">{{ index + 1 }}</td>
            <td style="width:14%;">{{ drug.id }}</td>
            <td style="width:15%;">{{ drug.drugname }}</td>
            <td style="width:14%;">{{ drug.drugunit }}</td>
            <td style="width:15%;">
              <button :disabled="drug.drugcount == 1" @click="drug.drugcount--">-</button>
              <span class="drugnum">{{ drug.drugcount }}</span>
              <button @click="drug.drugcount++">+</button>
            </td>
            <td style="width:15%;"><select name="unit">
                <option value="盒">盒</option>
                <option value="瓶">瓶</option>
                <option value="支">支</option>
                <option value="袋">袋</option>
              </select></td>
            <td style="width:7%;">{{ drug.drugsinpr }}</td>
            <td style="width:7%;">{{ drug.drugcount * 1 * drug.drugsinpr * 1 }}</td>
            <td style="width:7%;">
              <el-button class="delbutton" @click="handDeleDrug(drug.id)" type="danger" icon="el-icon-delete" circle>
              </el-button>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <el-button @click="opendrugInfo" class="adddrug" type="success" icon="el-icon-circle-plus">
            添加药品</el-button>
        </tfoot>
      </table>


    </div>
    <div class="totaldrug">
      <el-button class="adddrug" type="success" icon="el-icon-upload" @click="savesure">保存费用</el-button>

      <p>操作员<span style="color:red;">*</span></p>
      <el-select class="operator" v-model="value" placeholder="周李月">
        <el-option class="opers" v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>


      <div class="totalmoney">
        总价:<span style="color:red;">{{sum}}</span>元
      </div>
    </div>
  </div>
</template>

<script>
import { deleteDrugApi } from '../../../api/detailApi'
export default {
  props: ['arrdetail'],
  computed: {
    sum() {
      return this.arrdetail.reduce((pre, cur) => pre + cur.drugsinpr * cur.drugcount, 0)
    }
  },
  data() {
    return {

      options: [{
        value: '选项1',
        label: '周李月'
      }, {
        value: '选项2',
        label: '周李月'
      }, {
        value: '选项3',
        label: '周李月'
      }],
      value: '',
    }
  },
  methods: {
    handDeleDrug(id) {
      //逻辑 发送请求 把id传给后端 后端删除逻辑 通知前端刷新页面即可
      deleteDrugApi({ id: id }).then(res => {
        console.log('res', res);
        if (res.code == 200) {
          this.$emit('resetDrug')
        }
      })


    },

    opendrugInfo() {
      this.$emit('parentdrugopen')
    },

    savesure(){
      alert('保存成功')
    }


  },
  watch: {
    drugnum() {
      console.log(this.drugnum);
      return this.drugnum
    },
    drugone() {
      console.log(this.drugone);
      return this.drugone
    }
  }
}
</script>

<style lang="less" scoped>
.drugsbox {
  width: 65%;
  box-shadow: 1px 1px 6px 0px #888eee;
  border-radius: 10px;
  overflow: hidden;

  .totaldrug {
    margin: 0 20px;
    height: 70px;
    border-top: 1px solid #b8b8b8;
    padding-top: 15px;

    .adddrug {
      float: left;
      width: 101px;
      height: 40px;
      border-radius: 3px;
      background-color: #28d094;
      color: #fff;
      text-align: center;
      line-height: 40px;
      font-size: 14px;
      padding: 0;
    }

    p {
      float: left;
      line-height: 40px;
      font-size: 14px;
      text-align: center;
      padding: 0 10px;
    }

    .totalmoney {
      float: right;
      line-height: 40px;
      text-align: center;
    }

    .operator {
      float: left;

      .opers {
        background-color: red;
      }

      .el-input__suffix {
        width: 90px !important;
        line-height: 0 !important;

      }
    }
  }

  .titDrug {
    color: #666ee8;
    font-size: 26px;
    font-weight: bolder;
    line-height: 70px;
    padding-left: 20px;
  }

  table {
    width: 100%;
    min-height: 320px;
    font-size: 12px;
    overflow: hidden;
    overflow-y: scroll;

    tfoot {
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;

      .adddrug {
        width: 101px;
        height: 30px;
        border-radius: 3px;
        background-color: #28d094;
        color: #fff;
        text-align: center;
        line-height: 30px;
        font-size: 12px;
        padding: 0;
        margin-top: 20px;
      }
    }

    tr {
      display: flex;
      justify-content: space-around;
      align-items: center;

      td {
        text-align: center;

        .drugnum {
          display: inline-block;
          padding: 0 10px;
        }

        button {
          border: 0;
          background-color: #e6e7fb;
          border-radius: 50%;
        }
      }

    }

    .dhead {
      line-height: 40px;
      background-color: #e6e7fb;
      font-weight: 600;
    }

    .dbody {
      justify-content: space-around;
      text-align: center;
      border-bottom: 1px solid #e6e7fb;
      line-height: 55px;

      .delbutton {
        width: 30px;
        height: 30px;
        padding: 0;
        background-color: #e6e7fb;
        border-color: #e6e7fb;
        color: #666;
        font-weight: bold;
      }

      input,
      select {
        width: 34px;
        height: 28px;
        border: 1px solid #999;
        border-radius: 3px;
        text-align: center;
      }

      // span{
      //   display: inline-block;
      //   background-color: #e6e7fb;
      // }

      input {
        border: 0;
      }

      select {
        width: 58px;
      }
    }
  }
}
</style>